<template>
  <BasicModal title="回退原因" @register="registerModal" destroyOnClose
              :canFullscreen="false" :centered="true"
              :mask="false" :maskClosable="false" :width="400"
              :bodyStyle="{padding:'0px'}"
              @ok="handleSubmit"
  >
    <a-textarea v-model:value="model.backReasion" placeholder="请输入回退原因" allow-clear :autoSize="{ minRows: 7, maxRows: 7 }" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, onMounted, reactive } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import moment from 'dayjs'
import { useForm } from "/@/components/Form";
import BasicForm from "/@/components/Form/src/BasicForm.vue";
import { useMessage } from "/@/hooks/web/useMessage";

interface AccountFlowPay {
  backReasion: String
}

let model = reactive<AccountFlowPay>({
  backReasion : ''
});

const $message = useMessage();

// 声明Emits
const emit = defineEmits(['success', 'register']);

const [registerForm, {resetFields, setFieldsValue, validate, clearValidate}] = useForm({
  schemas: [
    {
      label: "",
      field: "backReason",
      component: "InputTextArea",
      colProps: { span: 24 },
      componentProps: { rows: 7, placeholder: "请输入回退原因" }
    }
  ],
  showActionButtonGroup: false,
})

//表单赋值
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
  await resetFields();
  setModalProps({confirmLoading: false});
  //表单赋值
  await setFieldsValue(data?.record || {})
  clearValidate()
});

//表单提交事件
async function handleSubmit() {
  try {
    const values = model.backReasion;
    emit("success", values)
    closeModal();
  } catch (e) {
    console.log(e);
  } finally {
    setModalProps({confirmLoading: false});
  }

}

</script>
